<template>
<div>
  <div>
    <mu-dialog :open="dialog" @close="close"  scrollable>
      <div class="user-item" v-for="user, index in usersList" @click="chooseUser(index)">
        <mu-paper :zDepth="2">
          <mu-row gutter class="user-box">
            <mu-col desktop="30">
              <mu-avatar :size="90" :src="user.user_thumbnail"/>
            </mu-col>
            <mu-col desktop="70">
              <div class="user user-name">{{user.user_name}}</div>
              <div class="user user-wxh"><span>微信昵称：{{user.user_nickname}}</span><br/>
              <span>微信号：{{user.user_wechat_id}}</span></div>
            </mu-col>
          </mu-row>
        </mu-paper>
      </div>
      <mu-flat-button primary label="关闭" @click="close" slot="actions"/>
    </mu-dialog>
  </div>

  <mu-row gutter class="user-box">
    <mu-col desktop="10">
      <mu-avatar :size="90" :src="user_thumbnail"/>
    </mu-col>
    <mu-col desktop="20">
      <div class="user user-name">{{user_name}}</div>
      <div class="user user-wxh">
        <span>微信昵称：{{user_nickname}}</span><br/>
        <span>微信号：{{user_wechat_id}}</span></div>
    </mu-col>
    </mu-col>
    <mu-col desktop="15">
      <div class="user-btn">
        <mu-raised-button label="选择用户" @click="open"/>
      </div>
    </mu-col>
    <mu-col desktop="55">
      <div class="picture-type-box">
        <mu-paper>
          <mu-select-field hintText="图片类型" v-model="picture_type" :underlineShow="false" @input="choosePictureType" >
            <mu-menu-item value="1" title="手办"/>
            <mu-menu-item value="2" title="帅哥"/>
            <mu-menu-item value="3" title="美女"/>
            <mu-menu-item value="4" title="萌宠"/>
          </mu-select-field>
        </mu-paper>
      </div>
    </mu-col>
  </mu-row>


  <mu-row gutter class="picture-list-box">
    <mu-col desktop="100">
      <multi-image-upload :resultPictures.sync="pictures" :param="uploadParam" :url="AddPictureUrl" :disabled='uploadStatus'></multi-image-upload>
    </mu-col>
  </mu-row>


</div>
</template>
<script>
  import MultiImageUpload from '../components/imageUpload/multi-image-upload.vue'
  import gridList from '../components/grid-list.vue'
  import http from "../http/http.js" 
  export default {
    data () {
      const menus = []
      for (let i = 0; i < 30; i++) {
        menus.push(i + 1)
      }
      return {
        chooseStatus:false,
        showNum:10,
        dialog: false,
        menus,

        picture_type:'',

        pictures:[],
        uploadParam:{
          picture_type:1,
          user_id:1
        },

        uploadStatus:true,
        uploadClickNum:0,

        getUsersUrl:this.config.getUsersUrl,
        AddPictureUrl:this.config.AddPictureUrl,
        usersList:{},
        user_id:0,
        user_thumbnail:'/static/images/upload.png',
        user_name:'',
        user_nickname:'',
        user_wechat_id:'',
      }
    },
    components : {
      gridList,
      MultiImageUpload
    },
    methods: {
      //选择类型
      choosePictureType: function(){
        this.uploadClickNum++
        if(this.uploadClickNum >=2)
          this.uploadStatus = false
        console.log(this.uploadClickNum)
        this.uploadParam.picture_type = this.picture_type
      },
      //是否屏蔽所有图片
      chooseAll: function(){
        console.log(!this.chooseStatus);
      },
      //打开弹出选择用户
      open () {
        this.dialog = true
      },
      //关闭弹出
      close () {
        this.dialog = false
      },
      //选择用户
      chooseUser: function(i){
        var el = document.getElementsByClassName('user-item')[i].getElementsByClassName('mu-paper')[0]
        var elAll = document.getElementsByClassName('user-item')
        for(var item in elAll){
          // console.log(item)
          if(this.isNumber(item))
            elAll[item].getElementsByClassName('mu-paper')[0].style.background = '#ffffff'
        }
        el.style.background = '#F0F0F0'
        this.uploadClickNum++
        if(this.uploadClickNum >=2)
          this.uploadStatus = false
        console.log(this.uploadClickNum)
        this.uploadParam.user_id = this.usersList[i].user_id    
        this.user_id = this.usersList[i].user_id
        this.user_thumbnail = this.usersList[i].user_thumbnail
        this.user_name = this.usersList[i].user_name
        this.user_nickname = this.usersList[i].user_nickname
        this.user_wechat_id = this.usersList[i].user_wechat_id
      },
      
      //判断是否为数字
      isNumber: function (value) { 
        //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/ 
　　　　var re = /^[0-9]+.?[0-9]*$/; 
    　　if (!re.test(value)) {
    　　　　return false;
    　　}
  　　　　return true; 
  　　} 
    },
    mounted() {
      var that = this
      http.get(that.getUsersUrl)
      .then(function(response){
        that.usersList = response.data;
      })
      .catch(function(err){console.log(err)});
    },
  }
</script>

<style lang="css">
.user-box{
  padding:20px 30px 10px 30px;
}
.col{
  padding:15px;
}
.checkbox {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  margin-right: 10px;
}
.mu-checkbox-svg-icon{
  width:35px;
  height:35px;
  margin-top: -5px;
}
.bd-radius{
  border-radius: 11px;
}
.showNum{
  width: 50px;
}
.gutter-right-item{
  float: right;
}
.refresh-box{
  display: inline-block;
  position: relative;
}
.refresh{
  position: absolute;
  z-index: 6;
  top:4px;
  left: 32px;
  background: 
}
.picture-list-box .col{
  padding:0px;
}
.user-name{
  height:35px;
  padding-top:-10px;
  font-size: 24px;
  color: #9CA3CD;
}
.user-wxh{
  line-height: 40px;
  font-size: 16px;
  line-height: 25px;
}
.user-btn{
  padding-top:30px;
}
/*弹窗*/
.mu-dialog{
  width: 90%;
  height:95%;
  max-width: 100%;
  max-height:100%;
}
.user-item .mu-paper:hover {
  background: #F0F0F0;
}
.user-item{
  float: left;
  cursor: pointer;
  width: 360px;
  padding: 15px；
}


.picture-type-box{
  width:100px;
  height:56px;
  margin-top:20px;
}
</style>